<template>
  <div>
    <ul class="container">
      <li>
        <van-icon name="shop-o" class="icon" />
        <span>店铺</span>
      </li>
      <li>
        <van-icon name="contact" class="icon" />
        <span>客服</span>
      </li>
      <li class="cat">
        <keep-alive>
          <div class="inm" v-if="showNum">{{ res }}</div>
        </keep-alive>
        <van-icon name="shopping-cart-o" class="icon" />
        <span>购物车</span>
      </li>
      <li class="add button" @click="add">加入购物车</li>
      <li class="fatch button"><Dialog3></Dialog3></li>
    </ul>
  </div>
  <!-- <div>{{ showShopInList }}</div> -->
  <!-- <div>{{ resData }}</div>
  <div>{{ res }}</div> -->
</template>
<script>
import Dialog3 from './Dialog3'
export default {
  data() {
    return {
      num: '',
      resData: [],
      res: '',
      showNum: false,
    }
  },
  computed: {
    showShopInList() {
      return this.$store.state.shopIn.ShopInList
    },
  },
  components: {
    Dialog3,
  },
  methods: {
    getA() {
      this.$store
        .dispatch({
          type: 'getAdd',
          goods_id: this.$route.query.goods_id,
        })
        .then((data) => {
          // console.log(data)
        })
    },
    getData() {
      const nesw = JSON.parse(localStorage.getItem('data'))
      let s = 0
      if (nesw) {
        for (let i = 0; i < nesw.length; i++) {
          s += nesw[i].num
        }
      }
      this.res = s
      if (this.res > 0) {
        this.showNum = true
      }
      return s
    },
    add(e) {
      let arr = this.$store.state.shopIn.ShopInList
      this.getA()
      this.showNum = true
      this.res++
      let Data = JSON.parse(localStorage.getItem('data'))
      if (!Data) {
        let obj = {}
        let Data = []
        obj.shop_price = this.showShopInList.shop_price
        obj.goods_id = this.showShopInList.goods_id
        obj.goods_name = this.showShopInList.goods_name
        obj.shop_name = arr.basic_info.shop_name
        obj.icon = this.showShopInList.original_img
        obj.price = this.showShopInList.shop_price
        obj.num = 1
        Data.push(obj)
        localStorage.setItem('data', JSON.stringify(Data))
      } else {
        let cat = Data.some((element) => {
          return element.goods_id == this.showShopInList.goods_id
        })
        if (!cat) {
          let obj = {}
          obj.shop_price = this.showShopInList.shop_price
          obj.goods_id = this.showShopInList.goods_id
          obj.goods_name = this.showShopInList.goods_name
          obj.shop_name = arr.basic_info.shop_name
          obj.icon = this.showShopInList.original_img
          obj.price = this.showShopInList.shop_price
          obj.num = 1
          Data.push(obj)
        } else {
          Data.forEach((element) => {
            if (element.goods_id == this.showShopInList.goods_id) {
              element.num = element.num + 1
            }
          })
        }
        console.log(Data)
        localStorage.setItem('data', JSON.stringify(Data))
      }
    },
  },
  mounted() {
    this.getData()
  },
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  .cat {
    position: relative;
    .inm {
      position: absolute;
      top: 0;
      right: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid red;
      background: #fff;
      color: red;
      z-index: 2;
      text-align: center;
    }
  }
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon {
      font-size: 30px;
    }
  }
  .button {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background-color: #ffc707;
    height: 42px;
    padding: 0 1rem;
    margin: 0 0.5rem;
    border-radius: 10em;
  }
  .fatch {
    background-color: #f91f28;
  }
}
</style>
